import { withI18n, Trans } from '@lingui/react'
import {
  PageHeader,
  Tag,
  Tabs,
  Alert,
  Select,
  Skeleton,
  Icon,
  Statistic,
  Row,
  Col,
  Typography,
  Button,
  InputNumber,
  Tooltip,
} from 'antd'
import PropTypes from 'prop-types'
import React, { PureComponent, Fragment } from 'react'
import { UserLink } from 'components'
import styles from '../index.less'
import ButtonGroup from 'antd/lib/button/button-group'

const { Paragraph } = Typography

const TabPane = Tabs.TabPane

@withI18n()
class Header extends PureComponent {
  state = {
    tmpLightDegree: 0,
    tmpLightDuration: 0,
  }
  render() {
    const {
      i18n,
      deviceid,
      onback,
      data,
      footer,
      onedit,
      setlightloading,
      onSetLight,
      onSetMode,
    } = this.props
    const { tmpLightDegree, tmpLightDuration } = this.state
    const {
      Delivers,
      Warning,
      Note,
      DeviceId,
      DeviceName,
      IMEI,
      ReportTotalTime,
      Mode,
      IsLined,
    } = data
    const IsMain = !(IMEI && IMEI.value && IMEI.value.indexOf('E:') >= 0)

    const modeltitlerow = (name, obj, onchange, autofold = false) =>
      obj && (
        <div className={styles.titleitem}>
          <div>{name}</div>
          <Paragraph
            {...obj.copyable && { copyable: { text: obj.value } }}
            {...obj.editable && { editable: { onChange: onchange } }}
          >
            {obj.value && autofold && obj.value.length >= 20
              ? `${obj.value.substring(0, 5)}...${obj.value.substring(
                  obj.value.length - 10,
                  obj.value.length
                )}`
              : obj.value}
          </Paragraph>
        </div>
      )

    const content = (
      <Row>
        <Col span={17}>
          <Row>
            <Col span={24}>
              {modeltitlerow(i18n.t`Device Name`, DeviceName, str => {
                if (str != DeviceName.value)
                  onedit('rename', { deviceid: deviceid, DeviceName: str })
              })}
            </Col>
            <Col span={24}>
              {modeltitlerow(i18n.t`Device IMEI`, IMEI, str => {}, true)}
            </Col>
          </Row>
        </Col>
        <Col span={7}>
          {ReportTotalTime && (
            <Statistic
              title={i18n.t`Count of Reporting`}
              suffix={i18n.t`Lines`}
              value={ReportTotalTime.value}
            />
          )}
        </Col>
      </Row>
    )
    const modeDisable = !IsLined
    const extraContent = (
      <Fragment>
        <Row>
          <Col span={17}>
            <Row>
              <Col span={24}>
                {modeltitlerow(i18n.t`Device ID`, DeviceId, str => {}, true)}
              </Col>
              <Col span={24}>
                {modeltitlerow(i18n.t`Note`, Note, str => {
                  if (str != Note.value)
                    onedit('changeNote', { deviceid: deviceid, Note: str })
                })}
              </Col>
              {IsMain && (
                <Col span={24}>
                  <div style={{ marginBottom: 5 }}>
                    <div className={styles.tagstitle}>
                      <Trans>Reporting mode</Trans>:{' '}
                      {modeDisable && (
                        <span>
                          &nbsp;&nbsp;
                          <Icon
                            type="exclamation-circle"
                            style={{ color: 'red' }}
                          />
                          <Trans>Device is not connected yet</Trans>
                        </span>
                      )}
                    </div>
                    <div>
                      <ButtonGroup>
                        <Tooltip
                          title={i18n.t`Balance the tariff and message density, and greatly reduce the traffic saving mode of communication tariff`}
                        >
                          <Button
                            disabled={modeDisable}
                            onClick={e => {
                              onSetMode(0)
                            }}
                            type={Mode == '0' ? 'primary' : 'default'}
                          >
                            <Trans>Provincial flow pattern 1</Trans>
                          </Button>
                        </Tooltip>

                        <Tooltip
                          title={i18n.t`Balance the tariff and message density, and intelligent omit the flow saving mode of duplicate data`}
                        >
                          <Button
                            disabled={modeDisable}
                            onClick={e => {
                              onSetMode(1)
                            }}
                            type={Mode == '1' ? 'primary' : 'default'}
                          >
                            <Trans>Provincial flow pattern 2</Trans>
                          </Button>
                        </Tooltip>

                        <Tooltip
                          title={i18n.t`Extreme polling speed, the first time to report dynamic changes. Customized traffic saving mode for NB scheme`}
                        >
                          <Button
                            disabled={modeDisable}
                            onClick={e => {
                              onSetMode(2)
                            }}
                            type={Mode == '2' ? 'primary' : 'default'}
                          >
                            <Trans>Extreme speed polling 1</Trans>
                          </Button>
                        </Tooltip>

                        <Tooltip
                          title={i18n.t`Extreme polling speed, the first time to report dynamic changes. A more comprehensive but relatively flow consuming model`}
                        >
                          <Button
                            disabled={modeDisable}
                            onClick={e => {
                              onSetMode(3)
                            }}
                            type={Mode == '3' ? 'primary' : 'default'}
                          >
                            <Trans>Extreme speed polling 2</Trans>
                          </Button>
                        </Tooltip>
                        <Tooltip
                          title={i18n.t`The comprehensive but slow mode consumes part of the communication flow to obtain the data integrity`}
                        >
                          <Button
                            disabled={modeDisable}
                            onClick={e => {
                              onSetMode(4)
                            }}
                            type={Mode == '4' ? 'primary' : 'default'}
                          >
                            <Trans>Comprehensive mode</Trans>
                          </Button>
                        </Tooltip>

                        <Button
                          disabled={modeDisable}
                          onClick={e => {
                            onSetMode(5)
                          }}
                          type={Mode == '5' ? 'primary' : 'default'}
                        >
                          <Trans>Stop polling</Trans>
                        </Button>
                      </ButtonGroup>
                    </div>
                  </div>
                </Col>
              )}
              <Col span={24}>
                <div>
                  <div className={styles.tagstitle}>
                    <Trans>Equipment allocation:</Trans>
                  </div>
                  <div>
                    {Delivers &&
                      (!Delivers.editable ? (
                        <Alert
                          message={
                            Delivers &&
                            Delivers.backarray.map(item => (
                              <UserLink
                                data={{
                                  username: item.username,
                                  role: item.role,
                                  avatar: item.avatar,
                                }}
                              />
                            ))
                          }
                          description={'很抱歉，您无权查看其它分配情况'}
                          type="error"
                        />
                      ) : (
                        Delivers.backarray.map(item => (
                          <UserLink
                            data={{
                              username: item.username,
                              role: item.role,
                              avatar: item.avatar,
                            }}
                          />
                        ))
                      ))}
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
          <Col span={7} style={{ marginTop: 10 }}>
            <div
              style={{
                maxWidth: 100,
                padding: 5,
                borderStyle: 'dashed',
                borderWidth: 1,
                borderColor: 'rgb(200,200,200)',
                borderRadius: 5,
              }}
            >
              <div style={{}}>
                <div style={{ minWidth: 60 }}>
                  <Trans>Brightness</Trans>:
                </div>
                <InputNumber
                  size="small"
                  value={tmpLightDegree}
                  min={0}
                  max={100}
                  onChange={value => {
                    this.setState({ tmpLightDegree: value })
                  }}
                  style={{ width: '100%' }}
                />
              </div>
              <div style={{ marginTop: 5 }}>
                <div style={{ minWidth: 60 }}>
                  <Trans>Lighting time</Trans>:
                </div>
                <InputNumber
                  size="small"
                  value={tmpLightDuration}
                  min={0}
                  max={65535}
                  onChange={value => {
                    this.setState({ tmpLightDuration: value })
                  }}
                  style={{ width: '100%' }}
                />
              </div>
              <Button
                size="small"
                type="primary"
                style={{ width: '100%', marginTop: 5 }}
                onClick={e => {
                  if (onSetLight) onSetLight(tmpLightDegree, tmpLightDuration)
                }}
                loading={setlightloading}
              >
                <Trans>Set Brightness</Trans>
              </Button>
            </div>
          </Col>
        </Row>
      </Fragment>
    )
    return (
      <Fragment>
        {!DeviceName && (
          <PageHeader
            title={
              <span>
                <Trans>Loading</Trans>&nbsp;
                <Icon type="loading" />
              </span>
            }
            onBack={onback}
            footer={
              <Tabs defaultActiveKey="1">
                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="code" />
                      <Trans>Device Detail</Trans>
                    </span>
                  }
                  key="1"
                >
                  <Skeleton active />
                </TabPane>
                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="read" />
                      <Trans>Data Form</Trans>
                    </span>
                  }
                  key="2"
                />

                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="area-chart" />
                      <Trans>Historical Data</Trans>
                    </span>
                  }
                  key="3"
                />
                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="stock" />
                      <Trans>Real-time Data</Trans>
                    </span>
                  }
                  key="4"
                />
                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="pie-chart" />
                      <Trans>Data Analysis</Trans>
                    </span>
                  }
                  key="5"
                />
                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="apartment" />
                      <Trans>Relational map</Trans>
                    </span>
                  }
                  key="6"
                />
                <TabPane
                  disabled
                  tab={
                    <span>
                      <Icon type="sliders" />
                      <Trans>Operation history</Trans>
                    </span>
                  }
                  key="7"
                />
              </Tabs>
            }
          >
            <Skeleton active />
          </PageHeader>
        )}
        {DeviceName && ReportTotalTime && (
          <PageHeader
            onBack={onback}
            title={DeviceName.value}
            tags={
              Warning &&
              Warning.value && <Tag color="red">{Warning.reason}</Tag>
            }
            extra={[]}
            footer={footer}
          >
            <div className="wrap">
              <div className="content">{content}</div>
              <div className="extraContent">{extraContent}</div>
            </div>
          </PageHeader>
        )}
      </Fragment>
    )
  }
}

Header.propTypes = {
  ondispatch: PropTypes.func,
  //form: PropTypes.object,
  footer: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Header
